菜菜菜的 Vue 30天 - Day27

好咧～前一章介紹了 state 以及 getters 了。

今天這章來介紹 mutations 及 actions

mutations

上一章有介紹了 state 是一個 Vuex 統一存放資料的地方，而我們介紹了如何取值，至於修改 state 的部份我們就必須透過呼叫 mutations 來執行 state 的修改。

那怎麼做呢？！如下：

我們先建立了一個 state 叫做 count，那我們每呼叫一次 mutations 就讓 count +1。

addCount 這個 mutations 我們帶入參數 state，這樣就能對 state 裡的 count 執行 +1 的動作了。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    addCount (state) {
      state.count++
    }
  }
})

至於呼叫 mutations 的部分，我們就能在 Vue 裡面使用 commit 來執行呼叫：

this.$store.commit('addCount');

另外我們如果要將其它的資料修改進 state 的話，commit 能夠再帶入第 2 個參數(payload)，如下：

this.$store.commit('addCount', 99);
//or
this.$store.commit('addCount', {
    amount: 99
});
//or
this.$store.commit({
    type: 'addCount',
    amount: 99
});

在 mutations 裡面就能這樣子使用：

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    addCount (state, payload) {
      state.count += payload.amount;
    }
  }
})

注意

最後使用 mutations 有一點非常的重要！！

就是在使用 mutations 時只能夠執行同步的操作。

若要執行非同步操作的話就要使用 actions，這部分我們就在下一章作介紹～